<template>
	<view class="page_wrapper">
		<!-- <view class="first_block">
			<image src="@/static/images/coin.png" class="coin_icon" mode="aspectFit"></image>
			<view class="my_coin_block">
				<view class="coin_num">{{fczCoin.totalCoin}}</view>
				<view class="coin_txt">学习币</view>
			</view>
		</view>
		<view v-for="(fczPrize, index ) in fczPrizeList" class="prize_block" @tap="exchangePrize(fczPrize)">
			<view class="left_block">
				<view class="prize_name">{{fczPrize.name}}</view>
				<view class="prize_remark">{{fczPrize.intro}}</view>
			</view>
			<view class="right_block">
				<view class="exchange_btn">点我兑换</view>
			</view>
		</view> -->
	</view>
</template>
<script>
	import {request} from '@/utils/request.js'
	import {utils} from '@/utils/utils.js'
	export default {
		data() {
			return {
				fczCoin: {
					totalCoin: '0'
				},
				fczPrizeList: []
			}
		},
		onShow() {
			// this.fetchData()
			// this.fetchPrizeData()
		},
		methods: {
			// fetchData() {
			// 	uni.showLoading()
			// 	request.get( 
			// 		'/fczCoins/my', {}
			// 	).then(res => {
			// 		uni.hideLoading()
			// 		console.log(res.totalCoin)
			// 		this.fczCoin = res
			// 	}).catch(err => {
			// 		uni.hideLoading()
			// 		console.log(err)
			// 	})
			// },
			// fetchPrizeData() {
			// 	request.get( 
			// 		'/fczPrizes/search', {'status': 'on'}
			// 	).then(res => {
			// 		console.log(res)
			// 		this.fczPrizeList = res.items
			// 	}).catch(err => {
			// 		console.log(err)
			// 	})
			// },
			// exchangePrize(fczPrize) {
			// 	const $this = this
			// 	const content = '需求消耗' + fczPrize.needCost + '学习币,确定兑换吗?'
			// 	uni.showModal({
			// 		title: '提示',
			// 		content: content,
			// 		success: function (res) {
			// 			if (res.confirm) {
			// 				uni.showLoading()
			// 				request.put( 
			// 					'/fczCoins/exchange', 
			// 					{ fczPrizeId: fczPrize.id }
			// 				).then(res => {
			// 					uni.hideLoading()
			// 					uni.showModal({ 
			// 						icon: 'none', 
			// 						title: '提示', 
			// 						content: '提交成功，请等待后台审核',
			// 						showCancel:false,
			// 					})
			// 					$this.fetchData()
			// 				}).catch(err => {
			// 					uni.hideLoading()
			// 					console.log(err)
			// 				})
			// 			} else if (res.cancel) {
			// 				console.log('用户点击取消');
			// 			}
			// 		}
			// 	})
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.page_wrapper{
		.first_block{
			width: 100%;
			height: 180px;
			background-color: lightseagreen;
			display: flex;
			flex-direction: column;
			align-items: center;
			.coin_icon{
				width: 80px;
				height: 80px;
				margin-top: 20px;
			}
			.my_coin_block{
				color: white;
				display: flex;
				align-items: center;
				.coin_num{
					font-size: 35px;
					font-weight: 500;
					margin-right: 10px;
				}
				.coin_txt{
					font-size: 14px;
				}
			}
		}
		.prize_block{
			margin: 8px 15px;
			padding: 10px 15px;
			height: 60px;
			border: 1px solid coral;
			border-radius: 5px;
			display: flex;
			.left_block{
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				.prize_name{
					font-size: 16px;
					font-weight: 400;
				}
				.prize_remark{
					font-size: 14px;
					color: #555555;
				}
			}
			.right_block{
				width: 100px;
				display: flex;
				align-items: center;
				.exchange_btn{
					font-size: 13px;
					color: white;
					width: 100%;
					height: 36px;
					border-radius: 20px;
					background-color: coral;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
</style>
